<template>
  <div class="test">
    <input type="button" value="请求数据" @click="getData" />
    <input type="button" value="重新加载" @click="myEchartstwo" />
    <h4 id="checkData"></h4>
    <p><span style="color: red">数据集预览>></span> {{ data_part }}</p>
    <div id="atable" style="width: 1200px; height: 800px"></div>
    <div id="btable" style="width: 1200px; height: 800px"></div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";
/*
var testarr = [];
if (isNaN(testarr)) {
  console.log("非空", isNaN(testarr), testarr);
} else {
  console.log("空", isNaN(testarr), testarr);
}
testarr.push("aa");
if (isNaN(testarr)) {
  console.log("非空", isNaN(testarr), testarr);
} else {
  console.log("空", isNaN(testarr), testarr);
}
*/

// 构建图表
export default {
  name: "Echartstwo",
  /*  创建组件前用axios请求获取数据
  beforeCreate() {
    axios({
      url: "/apib",
    }).then((res) => {
      console.log(res);
      var dataitem = res["data"];
      for (var i = 0; i < dataitem.length; i++) {
        var item = {
          deny: Number(dataitem[i].deny),
          denyTimes: Number(dataitem[i].denyTimes),
          title: dataitem[i].title,
        };
        var itemB = [
          dataitem[i].title,
          Number(dataitem[i].deny),
          Number(dataitem[i].denyTimes),
        ];
        data_part.push(item);
      };
      console.log(data_part, "数据", typeof data_part);
    });
  },
*/
  // 定义数据存储数组
  data() {
    var data = {
      data_part: [],
      data_full: [],
    };
    return data;
  },
  methods: {
    getData() {
      // var that = this;  //缓存组件指针

      // 实例化axios请求
      const requireA = axios.create({
        baseURL: "http://127.0.0.1:8082",
      });
      requireA({
        url: "/apib",
      }).then((res) => {
        console.log(res, "res", isNaN(res));
        var data_select = res["data"][0];
        var data_all = res["data"][1];
        for (var i = 0; i < data_select.length; i++) {
          // 字典形式数据
          var item = {
            title: data_select[i].title,
            deny: Number(data_select[i].deny),
            denyTimes: Number(data_select[i].denyTimes),
            country: data_select[i].country,
            privice: data_select[i].privice,
            city: data_select[i].city,
          };
          /*
    //数组形式数据
    var itemB = [
      dataitem[i].title,
      Number(dataitem[i].deny),
      Number(dataitem[i].denyTimes),
    ];*/

          this.data_part.push(item);
          // data_part.push(item);
        }
        for (var i = 0; i < data_all.length; i++) {
          var item = {
            title: data_all[i].title,
            deny: Number(data_all[i].deny),
            denyTimes: Number(data_all[i].denyTimes),
            country: data_all[i].country,
            privice: data_all[i].privice,
            city: data_all[i].city,
          };
          this.data_full.push(item);
        }
        console.log(this.data_part, "数据");
        console.log(this.data_full, "全数据");
      });
    },
    myEchartstwo() {
      var chart = echarts.init(document.getElementById("atable"));
      console.log(this.data_part, "检验");
      var option = {
        title: { text: "双柱图", top: "3%", left: "center" },
        legend: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          position: function (pos, params, el, elRect, size) {
            var obj = { top: 10 };
            obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 30;
            return obj;
          },
          extraCssText: "width: 170px",
        },
        dataset: {
          source: this.data_part,
          // dimensions: ["title", "deny", "denyTimes"],
        },
        xAxis: {
          type: "category",
          name: "title",
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            name: "deny",
          },
          {
            type: "bar",
            name: "denyTimes",
          },
        ],
      };

      document.getElementById("checkData").innerHTML =
        "数据传输中" +this.data_part +" " +isNaN(this.data_part);
      var that = this; // 缓存指针

      // 延迟数毫秒后应用配置项
      setTimeout(function () {
        // console.log("set内", that.data_part, "this指向", this.data_part);
        if (isNaN(that.data_part)) {
          // console.log("set>if内", that.data_part, "this指向", this.data_part);
          document.getElementById("checkData").innerHTML =
            "得到数据" + that.data_part + isNaN(that.data_part);
          chart.setOption(option);
        } else {
          document.getElementById("checkData").innerHTML =
            "数据获取失败" +that.data_part +isNaN(that.data_part);
        }
      }, 300);
    },

    myEchartsC() {
      var mCharts = echarts.init(
        document.getElementById("btable")
      ); /*实例化为mCharts*/
      const hours = [/*小时数据系列*/ "12a", "1a", "2a"];
      const days = [/*日期系列*/ "Saturday", "Friday"];
      var data = [
        [0, 0, 5],
        [0, 1, 1],
        [2, 1, 3],
        [1, 0, 2],
        [1, 1, 1],
      ]; /*纵轴类目数,横轴项目数,热力值 */
      //     .map(function (item) {
      // 		console.log(item) /*控制台打印item*/
      //     return [item[1], item[0], item[2] || '-'];
      // })
      option = {
        xAxis: {
          type: "category",
          data: hours,
        },
        yAxis: {
          type: "category",
          data: days,
        },
        visualMap: {
          min: 0,
          max: 10,
          // calculable: true,
          left: "center" /*居中*/,
          orient: "horizontal" /**/,
          bottom: "-10",
        },
        series: {
          name: "Punch Card",
          type: "heatmap",
          data: data,
          label: {
            show: true,
          },
        },
      };
      mCharts.setOption(option);
    },
  },

  mounted() {
    /*
       let a = document.getElementById('atable')
       let b = a.parentNode.parentNode
       a.style.width = b.offsetWidth -118 + 'px'
       a.style.height = b.offsetHeight - 15 + 'px'
    */
    this.getData();
    this.myEchartstwo();
    this.myEchartsC();
  },
};
</script>
